<template>
	<view class="app-container">
		<view class="container">
			<view class="header">
				<view class="title">
					<text class="mdi mdi-bullhorn-outline icon-primary"></text>
					<text class="title-text">公告管理</text>
				</view>
				<view class="action-bar">
					<button class="btn btn-primary add-btn" @click="addclick" hover-class="btn-primary-hover">
						<text class="mdi mdi-plus"></text>
						<text>新增公告</text>
					</button>
				</view>
			</view>

			<view v-if="loading" class="loading">
				<text class="mdi mdi-loading spin"></text>
				<text>加载公告中...</text>
			</view>

			<view v-else>
				<view class="notice-list">
					<view v-for="notice in filteredNotices" :key="notice._id" class="notice-card"
						@click="editclick(notice)" :class="{'notice-card-active': isActive === notice._id}"
						@touchstart="isActive = notice._id" @touchend="isActive = null">
						<view class="card-header">
							<text class="notice-title">{{ notice.title || '未命名公告' }}</text>
							<text :class="['status', notice.active ? 'active' : 'inactive']">
								{{ notice.active ? '生效中' : '已停用' }}
							</text>
						</view>
						<view class="card-body">
							<text class="notice-content">{{ notice.data }}</text>
						</view>
						<view class="card-footer">
							<text>创建: {{ formatDate(notice.create_time) }}</text>
							<text>更新: {{ formatDate(notice.update_time) }}</text>
						</view>
					</view>
				</view>

				<view v-if="filteredNotices.length === 0" class="empty-state">
					<text class="mdi mdi-inbox-outline empty-icon"></text>
					<text class="empty-title">暂无公告</text>
					<text class="empty-desc">点击右上角“新增公告”按钮创建第一条公告</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notices: [],
				loading: false,
				isActive: null
			};
		},
		computed: {
			filteredNotices() {
				if (!this.searchKeyword) return this.notices;
				const keyword = this.searchKeyword.toLowerCase();
				return this.notices.filter(notice =>
					(notice.title && notice.title.toLowerCase().includes(keyword)) ||
					(notice.data && notice.data.toLowerCase().includes(keyword))
				);
			}
		},
		mounted() {
			this.fetchNotices();
		},
		methods: {
			async fetchNotices() {
				this.loading = true;
				const noticeApi = uniCloud.importObject('notice')
				try {
					const res = await noticeApi.listNotices();
					if (res.code === 0) {
						this.notices = res.data.sort((a, b) => b.create_time - a.create_time);
					} else {
						uni.showToast({
							title: '获取失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取公告失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			addclick() {
				uni.$router.to({
					url: 'pagesA/notice/add',
				})
			},
			editclick(notice) {
				uni.$router.to({
					url: 'pagesA/notice/edit',
					params: {
						notice: notice
					}
				})
			}
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	.app-container {
		background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
		min-height: 100vh;
		padding: 20px 0;
	}

	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	.header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		padding: 20px;
		background: white;
		border-radius: 16px;
		box-shadow: 0 6px 20px rgba(41, 121, 255, 0.1);
	}

	.title {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.icon-primary {
		font-size: 28px;
		color: #2979ff;
		margin-right: 12px;
	}

	.title-text {
		font-size: 22px;
		font-weight: 600;
		color: #1a1a1a;
	}

	.action-bar {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		align-items: center;
	}

	.add-btn {
		background: linear-gradient(135deg, #2979ff, #1a6cff);
		border: none;
		padding: 12px 24px;
		border-radius: 12px;
		font-weight: 500;
		box-shadow: 0 4px 12px rgba(41, 121, 255, 0.3);
		color: white;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.btn-primary-hover {
		background: linear-gradient(135deg, #1a6cff, #0d5fef);
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(41, 121, 255, 0.4);
	}

	.notice-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 24px;
		margin-bottom: 40px;
	}

	.notice-card {
		background: white;
		border-radius: 18px;
		box-shadow: 0 8px 24px rgba(41, 121, 255, 0.08);
		transition: all 0.3s ease;
		overflow: hidden;
		cursor: pointer;
		position: relative;
	}

	.notice-card-active {
		transform: scale(0.98);
		box-shadow: 0 4px 12px rgba(41, 121, 255, 0.15);
	}

	.notice-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, #2979ff, #1a6cff);
	}

	.card-header {
		padding: 20px 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		border-bottom: 1px solid #f0f5ff;
	}

	.notice-title {
		font-size: 18px;
		font-weight: 600;
		color: #1a1a1a;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.status {
		padding: 6px 14px;
		border-radius: 20px;
		font-size: 13px;
		font-weight: 500;
		margin-left: 12px;
	}

	.status.active {
		background: rgba(41, 121, 255, 0.12);
		color: #2979ff;
	}

	.status.inactive {
		background: rgba(144, 147, 153, 0.12);
		color: #909399;
	}

	.card-body {
		padding: 20px 24px;
		min-height: 120px;
	}

	.notice-content {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.6;
		color: #4a5568;
		font-size: 15px;
	}

	.card-footer {
		padding: 16px 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #909399;
		background: #f9fbfd;
		border-top: 1px solid #f0f5ff;
	}

	.loading {
		text-align: center;
		padding: 60px;
		color: #909399;
		background: white;
		border-radius: 18px;
		box-shadow: 0 8px 24px rgba(41, 121, 255, 0.08);
	}

	.spin {
		display: inline-block;
		animation: spin 1s linear infinite;
		font-size: 32px;
		margin-bottom: 16px;
		color: #2979ff;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.empty-state {
		text-align: center;
		padding: 60px 20px;
		color: #909399;
		background: white;
		border-radius: 18px;
		box-shadow: 0 8px 24px rgba(41, 121, 255, 0.08);
	}

	.empty-icon {
		font-size: 72px;
		margin-bottom: 20px;
		color: #e0e7ff;
		display: block;
	}

	.empty-title {
		font-size: 20px;
		font-weight: 500;
		color: #606266;
		display: block;
		margin-bottom: 8px;
	}

	.empty-desc {
		font-size: 15px;
		color: #909399;
		display: block;
	}

	@media (max-width: 768px) {
		.header {
			flex-direction: column;
			align-items: stretch;
		}

		.title {
			margin-bottom: 20px;
		}

		.add-btn {
			width: 100%;
		}

		.notice-list {
			grid-template-columns: 1fr;
		}
	}
</style>